<!-- directive:title 普通的 select 竟然没有分析 -->
<!-- directive:breadcrumb select -->
<div class='panel-body'>
    <div class='panel panel-default'>
        <div class='panel-heading'> 表单项 </div>
        <div class='panel-body'>
            <div class="row">
                <div class="col-sm-6">
                    <article class="docs-content">
                        <p>ngOption针对不同类型的数据源有不同的用法，主要体现在数组和对象上。</p>
                        <p>数组：</p>
                        <p>label for value in array</p>
                        <p>select as label for value in array</p>
                        <p>label group by group for value in array</p>
                        <p>select as label group by group for value in array</p>
                        <p>select as label group by group for value in array track by trackexpr</p>
                        <p>对象：</p>
                        <p>label for ( key , value ) in object</p>
                        <p>select as label for ( key , value ) in object</p>
                        <p>label group by group for ( key , value ) in object</p>
                        <p>select as label group by group for ( key , value ) in object</p>
                        <p>说明：</p>
                        <p>array / object： 数据源的类型，有数组和对象两种</p>
                        <p>value：迭代过程中，引用数组的项或者对象的属性值</p>
                        <p>key：迭代过程中，引用对象的属性名</p>
                        <p>label：选项显示的标签，用户可看到的</p>
                        <p>select：结果绑定到ngModel中，如果没有指定，则默认绑定value</p>
                        <p>group：group by的条件，表示按某条件进行分组</p>
                        <p>trackexpr：用于唯一确定数组中的迭代项的表达式</p>
                    </article>
                    <hr>
                    <h4>color.name for color in colors</h4>
                    <select class="form-control" ng-model="myColor1" ng-options="color.name for color in colors"></select>
                    <h6>myColor = {{myColor1}}</h6>
                    <hr>
                    <h4>color.shade as color.name for color in colors</h4>
                    <select class="form-control" ng-model="myColor2" ng-options="color.shade as color.name for color in colors"></select>
                    <h6>myColor = {{myColor2}}</h6>
                    <hr>
                    <h4>color.name group by color.shade for color in colors</h4>
                    <select class="form-control" ng-model="myColor3" ng-options="color.name group by color.shade for color in colors"></select>
                    <h6>myColor = {{myColor3}}</h6>
                    <hr>
                    <h4>color.name as color.name group by color.shade for color in colors</h4>
                    <select class="form-control" ng-model="myColor4" ng-options="color.name as color.name group by color.shade for color in colors"></select>
                    <h6>myColor = {{myColor4}}</h6>
                    <hr>
                    <h4>color.name for color in colors track by color.name</h4>
                    <select class="form-control" ng-model="myColor5" ng-options="color.name for color in colors track by color.name"></select>
                    <h6>myColor = {{myColor5}}</h6>
                    <hr>
                    <h4>key for (key, value) in object</h4>
                    <select class="form-control" ng-model="obj1" ng-options="key for (key, value) in object"></select>
                    <h6>obj = {{obj1}}</h6>
                    <hr>
                    <h4>key as key for (key, value) in object</h4>
                    <select class="form-control" ng-model="obj2" ng-options="key as key for (key, value) in object"></select>
                    <h6>obj = {{obj2}}</h6>
                    <hr>
                    <h4>key group by value for (key, value) in object</h4>
                    <select class="form-control" ng-model="obj3" ng-options="key group by value for (key, value) in object"></select>
                    <h6>obj = {{obj3}}</h6>
                    <hr>
                    <h4>key as key group by value for (key, value) in object</h4>
                    <select class="form-control" ng-model="obj4" ng-options="key as key group by value for (key, value) in object"></select>
                    <h6>obj = {{obj4}}</h6>
                </div>
                <div class="col-sm-6">
                    <hr>
                    <h4>测试正常使用 row.id as row.name for row in data</h4>
                    <select class="form-control" ng-model="test1" ng-options="row.id as row.name for row in data1"></select>
                    <h6>test = {{test1}}</h6>
                    <hr>
                    <h4>测试对象的强制绑定 ----- 效果不大好</h4>
                    <input type="text" ng-model="test1">
                    <h6>test = {{test1}}</h6>
                    <hr>
                    <h4>测试数据源延时赋值 ----- good</h4>
                    <select class="form-control" ng-model="test2" ng-options="row.id as row.name for row in data2"></select>
                    <h6>test = {{test2}}</h6>
                    <hr>
                    <h4>测试数据延时赋值 ----- good</h4>
                    <select class="form-control" ng-model="test3" ng-options="row.id as row.name for row in data2"></select>
                    <h6>test = {{test3}}</h6>
                    <hr>
                    <h4>测试无数据源 ----- good</h4>
                    <select class="form-control" ng-model="test1" ng-options="row.id as row.name for row in data3"></select>
                    <h6>test = {{test2}}</h6>
                    <hr>
                    <h4>测试无数据 ----- 效果不大好</h4>
                    <select class="form-control" ng-model="test4" ng-options="row.id as row.name for row in data1"></select>
                    <h6>test = {{test3}}</h6>
                </div>
            </div>
        </div>
    </div>
</div>
